<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

		/**
		 * 键盘事件：
		 *    onkeydown
		 *        - 按键被按下
		 *        - 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
		 *        - 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快
		 *            这种设计是为了防止误操作的发生。
		 *    onkeyup
		 *        - 按键被松开
		 *
		 *  键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
		 */
        window.onload = function () {

            /**
             * 给document绑定按键被按下
             * @param event
             */
            document.onkeydown = function (event) {
                event = event || window.event;
                /**
                 * 可以通过keyCode来获取按键的unicode编码
                 *    通过它可以判断哪个按键被按下
                 * 除了keyCode，事件对象中还提供了几个属性
                 *    altKey
                 *    ctrlKey
                 *    shiftKey
                 *   这个三个用来判断alt ctrl 和 shift是否被按下
                 *   如果按下则返回true，否则返回false
                 */
                //console.log(event.keyCode);

                //判断一个y是否被按下, 判断y和ctrl是否同时被按下,keyCode是unicode编码
                if (event.keyCode === 89 && event.ctrlKey) {
                    console.log("ctrl和y都被按下了");
                }
            };

            //获取input
            var input = document.getElementsByTagName("input")[0];
            /**
             * 给input绑定按键被按下
             * @param event
             * @returns {boolean}
             */
            input.onkeydown = function (event) {
                event = event || window.event;
                console.log(event.key);
                //数字 48 - 57
                //使文本框中不能输入数字
                if (event.keyCode >= 48 && event.keyCode <= 57) {
                    //在文本框中输入内容，属于onkeydown的默认行为
                    //如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
                    return false;
                }
            };

			/**
			 * 按键被松开
			 */
			input.onkeyup = function(event){
				console.log("按键松开了"+event.key);
			};
        };
    </script>
</head>
<body>

<input type="text"/>

</body>
</html>
